<template>
  <!-- 电影院组件(自己封装) -->
  <div class="box"
       :style="{
  height:height
}">
    <ul>
      <li v-for='data in $store.state.cinemaData'
          :key='data.cinemaId'>
        <div class="left">
          <div class="cinemaName">{{data.name}}</div>
          <div class="cinemaAddress">{{data.address}}</div>
        </div>
        <div class="right">
          <div style="font-size: 0.9375rem;color: #ff5f16;">￥{{data.lowPrice/100}}<span style="font-size:  .625rem;">起</span></div>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
import BetterScroll from 'better-scroll'
import { mapState, mapMutations, mapActions } from 'vuex'
export default {
  data () {
    return {
      height: '0px'
    }
  },
  computed: {
    // 对象中的扩展运算符(...)用于取出参数对象中的所有可遍历属性，拷贝到当前对象之中
    ...mapState(['cinemaData'])
    //相当于把vuex的cinemaData给放到这个组件的data里？,看看下面或者文档
  },
  methods: {
    ...mapActions(['getCinemaData']),
  },
  mounted () {
    // console.log(document.getElementsByClassName("van-nav-bar")[0].offsetHeight)
    // this.height = document.documentElement.clientHeight - document.getElementsByTagName("footer")[0].offsetHeight - document.getElementsByClassName("van-nav-bar")[0].offsetHeight + 'px'

    // 当第一次数据调过来的时候就保存到vuex里，后续如果没有更改就不用进行
    // this.$store.state.cinemaData.length
    setTimeout(() => {
      this.height = document.documentElement.clientHeight - document.getElementsByTagName("footer")[0].offsetHeight - document.getElementsByClassName("van-nav-bar")[0].offsetHeight + 'px'
    }, 1)
    if (this.cinemaData.length === 0) {
      // this.$store.dispatch
      this.getCinemaData('getCinemaData', this.$store.state.cityId).then(res => {
        // 等数据传过来，初始化滚动条插件
        this.$nextTick(() => {
          new BetterScroll('.box', {
            scrollbar: {
              fade: true
            }
          })
        })
      })
    } else {
      // 初始化滚动条插件
      this.$nextTick(() => {
        new BetterScroll('.box', {
          scrollbar: {
            fade: true
          }
        })
      })
    }
  },
}
</script>
<style lang="scss" scoped>
li {
  padding: 0.9375rem;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #e2e0e0;
  .cinemaName {
    font-size: 0.9375rem;
  }
  .cinemaAddress {
    font-size: 0.8125rem;
    width: 13.2813rem;
    color: #aaaaaa;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .left {
    width: 17.5rem;
  }
}
.box {
  // height 用js来动态赋值，其原理就是整个html的高度减去下面选项卡的高度
  // document.documentElement.clientHeight - document.getElementsByTagName("footer")[0].offsetHeight + 'px'
  overflow: hidden;
  position: relative; //修正滚动条的位置
}
</style>